// src/navigation/MainNavigator.tsx
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text, StyleSheet } from 'react-native';

// Main Screens
import HomeScreen from '../screens/main/HomeScreen';
import ChatScreen from '../screens/main/ChatScreen';
import TranslateScreen from '../screens/main/TranslateScreen';
import VoiceScreen from '../screens/main/VoiceScreen';
import Subscription from '../screens/profile/SubscriptionScreen';

// History Screens
import ActivityHistoryScreen from '../screens/main/ActivityHistoryScreen';
import FeatureListScreen from '../screens/main/FeatureListScreen';

// Profile Stack
import ProfileNavigator from './ProfileNavigator';

export type MainTabParamList = {
    Home: undefined;
    Chat: undefined;
    Translate: undefined;
    Voice: undefined;
    Profile: undefined;
};

export type MainStackParamList = {
    MainTabs: {
        screen?: keyof MainTabParamList;
    } | undefined;
    Subscription: undefined;
    ActivityHistory: undefined;
    FeatureList: undefined;
    ChatDetail: { conversationId: string };
    TranslateDetail: { translationId: string };
    VoiceDetail: { recordId: string };
    Favorites: undefined;
    Settings: undefined;
};

const Tab = createBottomTabNavigator<MainTabParamList>();
const Stack = createStackNavigator<MainStackParamList>();

// 简化的图标映射
const iconMap = {
    home: '🏠',
    chat: '💬',
    translate: '🌐',
    mic: '🎤',
    person: '👤',
};

// Tab 图标组件
const TabIcon: React.FC<{
    name: keyof typeof iconMap;
    color: string;
    size: number;
    focused: boolean;
    badge?: number;
}> = ({ name, color, size, focused, badge }) => {
    return (
        <View style={styles.tabIconContainer}>
            <Text style={{ fontSize: size, color }}>
                {iconMap[name]}
            </Text>
            {badge && badge > 0 && (
                <View style={styles.badge}>
                    <Text style={styles.badgeText}>
                        {badge > 99 ? '99+' : badge}
                    </Text>
                </View>
            )}
            {focused && <View style={styles.indicator} />}
        </View>
    );
};

// 底部Tab导航
const MainTabs: React.FC = () => {
    return (
        <Tab.Navigator
            screenOptions={{
                tabBarActiveTintColor: '#667eea',
                tabBarInactiveTintColor: '#999',
                tabBarStyle: {
                    height: 65,
                    paddingBottom: 10,
                    paddingTop: 10,
                    backgroundColor: '#fff',
                    borderTopWidth: 1,
                    borderTopColor: '#f0f0f0',
                    elevation: 10,
                    shadowColor: '#000',
                    shadowOffset: { width: 0, height: -2 },
                    shadowOpacity: 0.1,
                    shadowRadius: 3,
                },
                tabBarLabelStyle: {
                    fontSize: 12,
                    marginTop: 5,
                },
                headerShown: false, // 全局设置不显示header
            }}
        >
            <Tab.Screen
                name="Home"
                component={HomeScreen}
                options={{
                    tabBarLabel: '首页',
                    tabBarIcon: ({ color, size, focused }: {
                        color: string;
                        size: number;
                        focused: boolean;
                    }) => (
                        <TabIcon
                            name="home"
                            color={color}
                            size={size}
                            focused={focused}
                        />
                    )
                }}
            />
            <Tab.Screen
                name="Chat"
                component={ChatScreen}
                options={{
                    tabBarLabel: 'AI聊天',
                    tabBarIcon: ({ color, size, focused }: {
                        color: string;
                        size: number;
                        focused: boolean;
                    }) => (
                        <TabIcon
                            name="chat"
                            color={color}
                            size={size}
                            focused={focused}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="Translate"
                component={TranslateScreen}
                options={{
                    tabBarLabel: '翻译',
                    tabBarIcon: ({ color, size, focused }: {
                        color: string;
                        size: number;
                        focused: boolean;
                    }) => (
                        <TabIcon
                            name="translate"
                            color={color}
                            size={size}
                            focused={focused}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="Voice"
                component={VoiceScreen}
                options={{
                    tabBarLabel: '语音',
                    tabBarIcon: ({ color, size, focused }: {
                        color: string;
                        size: number;
                        focused: boolean;
                    }) => (
                        <TabIcon
                            name="mic"
                            color={color}
                            size={size}
                            focused={focused}
                        />
                    ),
                }}
            />
            <Tab.Screen
                name="Profile"
                component={ProfileNavigator}
                options={{
                    tabBarLabel: '我的',
                    tabBarIcon: ({ color, size, focused }: {
                        color: string;
                        size: number;
                        focused: boolean;
                    }) => (
                        <TabIcon
                            name="person"
                            color={color}
                            size={size}
                            focused={focused}
                        />
                    ),
                }}
            />
        </Tab.Navigator>
    );
};

// 主导航器
const MainNavigator: React.FC = () => {
    return (
        <Stack.Navigator
            screenOptions={{
                headerStyle: {
                    backgroundColor: '#667eea',
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontWeight: 'bold',
                },
            }}
        >
            <Stack.Screen
                name="MainTabs"
                component={MainTabs}
                options={{ headerShown: false }}
            />
            <Stack.Screen
                name="ChatDetail"
                component={ChatScreen}
                options={{
                    headerTitle: '对话详情',
                }}
            />
            <Stack.Screen
                name="TranslateDetail"
                component={TranslateScreen}
                options={{
                    headerTitle: '翻译详情',
                }}
            />
            <Stack.Screen
                name="VoiceDetail"
                component={VoiceScreen}
                options={{
                    headerTitle: '语音详情',
                }}
            />
            <Stack.Screen
                name="Subscription"
                component={Subscription}
                options={{
                    headerTitle: '订阅管理',
                }}
            />
            <Stack.Screen
                name="ActivityHistory"
                component={ActivityHistoryScreen}
                options={{
                    headerTitle: '使用记录',
                }}
            />
            <Stack.Screen
                name="FeatureList"
                component={FeatureListScreen}
                options={{
                    headerTitle: '所有功能',
                }}
            />
        </Stack.Navigator>
    );
};

const styles = StyleSheet.create({
    tabIconContainer: {
        alignItems: 'center',
        justifyContent: 'center',
    },
    badge: {
        position: 'absolute',
        top: -5,
        right: -10,
        backgroundColor: '#ff6b6b',
        borderRadius: 10,
        minWidth: 18,
        height: 18,
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 4,
    },
    badgeText: {
        color: '#fff',
        fontSize: 10,
        fontWeight: 'bold',
    },
    indicator: {
        position: 'absolute',
        bottom: -8,
        width: 4,
        height: 4,
        borderRadius: 2,
        backgroundColor: '#667eea',
    },
});

export default MainNavigator;